{{define "cp_soundboard"}}
{{template "cp_head" .}}
<header class="page-header">
    <h2>Soundboard</h2>
</header>

{{template "cp_alerts" .}}

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <header class="card-header">
                <h2 class="card-title">Upload new</h2>
            </header>
            <div class="card-body">
                <form method="post" action="new" enctype="multipart/form-data">
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" class="form-control" name="Name" placeholder="name">
                    </div>
                    <div class="form-group">
                        <label>Allowed roles</label>
                        <select name="RequiredRoles" class="multiselect form-control" multiple="multiple" data-plugin-multiselect data-placeholder="Everyone">
                            {{roleOptionsMulti .ActiveGuild.Roles nil nil}}
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Disallowed roles</label>
                        <select name="BlacklistedRoles" class="multiselect form-control" multiple="multiple" data-plugin-multiselect>
                            {{roleOptionsMulti .ActiveGuild.Roles nil nil}}
                        </select>
                    </div>

                    <div class="form-group">
                        <p class="form-control-static">Either upload a sound or specify a sound url</p>
                        <p class="form-control-static">You can find many great sounds <a href="http://soundboard.panictank.net/">here</a></p>
                    </div>
                    <div class="form-group">
                        <label for="sound-file">Upload a sound</label>
                        <input type="file" id="sound-file" name="Sound">
                    </div>
                    <div class="form-group">
                        <label>Sound URL</label>
                        <input type="text" class="form-control" name="SoundURL" placeholder="URL">
                        <p class="help-block">Specify a sound url instead of uploading a sound (direct link to a media file, NOT a youtube link)</p>
                    </div>
                    <input type="submit" class="btn btn-success" value="Upload/Download!">
                </form>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Existing sounds</h2>
            </div>
            <div class="card-body">
                {{$dot := .}}
                {{range .SoundboardSounds}}
                <form id="sound-item-{{.ID}}" data-async-form method="post" action="/manage/{{$dot.ActiveGuild.ID}}/soundboard/update"><input type="text" class="hidden form-control" name="ID" value="{{.ID}}"></form>{{end}}

                <table class="table table-responsive-md table-sm mb-0">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Allowed roles</th>
                            <th>Disallowed role</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{$guildmember := .ActiveGuild.ID}}
                        {{$roles := .ActiveGuild.Roles}}
                        {{$highest := .HighestRole}}
                        {{range .SoundboardSounds}}
                        <tr>
                            <td>
                                <input form="sound-item-{{.ID}}" type="text" class="form-control" name="Name" placeholder="" value="{{.Name}}">
                            </td>

                            <td>
                                <select form="sound-item-{{.ID}}" name="RequiredRoles" class="multiselect form-control" multiple="multiple" data-plugin-multiselect data-placeholder="Everyone">
                                    {{roleOptionsMulti $roles nil .RequiredRoles}}
                                </select>
                            </td>
                            <td>
                                <select form="sound-item-{{.ID}}" name="BlacklistedRoles" class="multiselect form-control" multiple="multiple" data-plugin-multiselect>
                                    {{roleOptionsMulti $roles nil .BlacklistedRoles}}
                                </select>
                            </td>

                            <td>
                                <p class="form-control-static">{{if eq .Status 0}}Queued{{else if eq .Status 1}}Ready{{else if eq .Status 2}}Processing{{else if eq .Status 3}}Too long{{else if eq .Status 4}}Failed, contact support{{end}}</p>
                            </td>
                            
                            <td>
                                <button form="sound-item-{{.ID}}" type="submit" class="btn btn-success" formaction="/manage/{{$dot.ActiveGuild.ID}}/soundboard/update">Save</button>
                                <button form="sound-item-{{.ID}}" type="submit" class="btn btn-danger" formaction="/manage/{{$dot.ActiveGuild.ID}}/soundboard/delete">Delete</button>
                            </td>
                        </tr>
                        {{end}}
                    </tbody>
                </table>
            </div>
        </div>
        <!-- /.panel -->
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->            

{{template "cp_footer" .}}

{{end}}
